@import 'variables'
@import 'nib'
@import 'mixins'

#stream
  padding-top: 24px
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0
  overflow-y: auto
  overflow-x: hidden
  transition: all 0.25s

  .frame
    overflow: hidden

    .btn.btn-small
      background: #FFF

    &:hover
      .code-bar .actions
        opacity: 1

    .row.header
      padding-top: 24px

    .outer
      margin: 0 24px 24px 24px
      box-shadow: 0 1px 6px rgba(0,0,0,0.12)
      position: relative
      overflow: none
      .overflow-indicator
        font-size: 17px
        vertical-align: middle
      &.noshadow
        box-shadow: none

      .left-frame-toggle
        background-color: #F8F9FB
        position:absolute
        width: 45px
        display: block
        border-right: 1px solid #e6e9ef
        top: 39px
        bottom: 0px
        z-index: 1

        .left-toggle-menu
          width: (frame-left-menu-width - frame-left-menu-hanging-lid-width)
          position:absolute
          left: 0

          .btn-group.toggle-buttons
            margin: 0
            width: (frame-left-menu-width - frame-left-menu-hanging-lid-width)
            .mini-menu-item-text
              display: block
              font-size: 9px
              line-height: 10px
              margin-top: 4px
              padding: 0

          button
            font-size: 12px
            margin: 0
            width: 44px
            border-radius: 0
            padding: 6px 8px 0px 8px
            border-bottom: 1px solid #D8DDE2
            padding-bottom: 3px
            height: 58px
            color: #9B9DA2
            line-height: 22px
            position: relative
            box-shadow: none
            background: #F8F9FB
            z-index: 3
            &.active, &:focus
              color: #000
              outline: 0
            &:hover
              color: #F8F9FB
              background: #40454f
              outline: 0

            i, span
              font-size: 21px
              line-height: 21px
              vertical-align: bottom
            .frame-left-menu-icon
              width: 22px
              height: 22px
              margin: 0px auto
              background-position: 0% 0%
              background-repeat: no-repeat
              border: 0
              background-size: contain
              background-color: transparent


      .right-inner-frame
        margin: 0 0px 0px 25px
        display: block
        z-index: 13
        position: relative
        &.no-indicator
          margin: 0 0px 0px (frame-left-menu-width - frame-left-menu-hanging-lid-width)
        &.no-left-menu
          margin: 0

    .inner
      position: relative
      background-color: #fff

      .view-result
        position: relative
        height: auto
        minimum-height: middlebar-height
        background: #F8F9FB
        z-index: 10
        pre
          margin: 0
          &.frame-error
            white-space: pre-wrap
        &.fade
          transition: .6s all linear
          opacity: 1
          &.ng-hide-remove
            display: block !important
          &.ng-hide-remove, &.ng-hide-add.ng-hide-add-active
            opacity: 0
          &.ng-hide-remove.ng-hide-remove-active, &.ng-hide-add
            opacity: 1

        .warn
          color: #666
          font-size: 0.9em
          padding-bottom: 4px

        .form-info
          font-size: 12px

        .center-tbl-left-col
          width: 175px
          display: inline-block

        .view-result-graph
          background: #fff
          .graph-holder
            background-color: #F9FBFD
            display: table
            width: 100%
            min-height: frame-min-height
            svg
              width: 100%
              height: (svg-start-height)
            &.one-legend-row
              svg
                height: (svg-start-height - legend-row-height)
              .frame-notifications
                padding-top: legend-row-height
            &.two-legend-rows
              svg
                height: (svg-start-height - legend-row-height*2)
              .frame-notifications
                padding-top: legend-row-height*2
            > *
              display: table-row
              > .cell
                display: table-cell
                border-top: 1px solid #e6e9ef
                width: 100%
                height: middlebar-height
                line-height: middlebar-height
                vertical-align: middle

            a.fa-table
              font-size: 24px
              absolute: bottom 57px right horizontal-padding

            .graph-contents
              position: relative
              overflow: hidden
              height: 100%

        .view-result-table
          position: relative
          max-height: frame-result-height
          min-height: frame-min-height
          .table-holder
            max-height: (frame-result-height - middlebar-height)
            min-height: (frame-min-height - middlebar-height)
            overflow: auto
            background: #fff
            article.help
              background: none
          &.ascii-result-table
            article
              height: (frame-result-height - middlebar-height)
              .ascii-table
                overflow: visible
                word-wrap: normal
                background: none

        .view-result-plan
          background-color: #F9FBFD
          max-height: frame-result-height
          min-height: frame-min-height
          .plan-holder
            height: (frame-result-height - middlebar-height)
            overflow: auto
            background: #fff

        .view-result-raw
          position: relative
          max-height: frame-result-height
          min-height: frame-min-height
          .raw-holder
            max-height: (frame-result-height - middlebar-height)
            min-height: (frame-min-height - middlebar-height)
            overflow: auto

        .view-result-error
          &.with-frame-menu
            max-height: frame-result-height
            min-height: frame-min-height
            .error-holder
              max-height: (frame-result-height - middlebar-height)
              min-height: (frame-min-height - middlebar-height)
              overflow: auto
              background: #fff
          pre
            font-family: mono-font-family
            font-size: 14px
            padding: 12px 16px
            margin: 0
            background: none
            border: none

        .view-result-messages
          max-height: frame-result-height
          min-height: frame-min-height
          .messages-holder
            max-height: (frame-result-height - middlebar-height)
            min-height: (frame-min-height - middlebar-height)
            overflow: auto
            background: #fff
            pre
              font-family: mono-font-family
              font-size: 14px
              padding: 12px 16px
              margin: 0
              border: none
            h4
              vertical-align: bottom
          .cypher-messages
            padding: 10px 0 10px 0
            .cypher-message
              display: inline-block
              font-weight: bold
              line-height: 1em
              text-align: center
              white-space: nowrap
              vertical-align: baseline
              user-select: none
              font-size: 12px
              margin-right: 5px
              padding: 4px 7px 4px 5px
              border-radius: 3px
              &.cypher-message-warning
                background-color: color-warning-on-white
                color: #FFFFFF
              &.cypher-message-error
                background-color: color-error
        .view-result-loading
          .spinner
            height: 40px
            position: relative;
            top: 50%;
            padding-top: 4px
            padding-bottom: 4px
            margin-left: auto
            margin-right: auto
            text-align: center

    footer
      position: relative
      padding: 0
      .toggle-footer-margin
        margin-top: 3px
      p
        margin: 5px
        font-size: 14px
        line-height: 28px
      &.tight
        position: absolute
        bottom: 0px
        border-top: 1px solid #c8cbd2
        height: 39px
        line-height: 39px

.frame-slider-wrapper
  position: absolute
  top: 8px
  right: 20px
  width: 225px
  span
    line-height: 21px
    display: block
    color: #9b9da2
    text-transform: uppercase
    font-weight: bold
    font-size: 11px
  .frame-slider
    position: absolute
    top: 4px
    right: 0
    width: 100px
    input[type="range"]
      -webkit-appearance: none
      outline: none
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
      background: #ddd
      border-radius: 14px
      padding: 1px 2px
      width: 100%
      height: 8px
      margin-top: 3px
      &::-moz-range-track
        border: inherit
        background: transparent
      &::-ms-track
        border: inherit
        color: transparent
        background: transparent
      &::-ms-fill-lower, &::-ms-fill-upper
        background: transparent
      &::-ms-tooltip
        display: none
      &::-webkit-slider-thumb
        -webkit-appearance: none
        slider-thumb()
      &::-moz-range-thumb
        slider-thumb()
      &::-ms-thumb
        slider-thumb()
.frame-notifications
  width: 30%
  max-width: 355px
  position: absolute
  top: 0
  right: 0
  bottom: middlebar-height
  pointer-events: none
  z-index: 20
  overflow: hidden
  .repeater
    margin: 10px 10px 0 0
    .animation-layer
      transition: max-height .7s
      max-height: 180px
      overflow: hidden
      &.closing
        max-height: 0
      .table-wrapper
        display: table
        .frame-notification
          cursor: pointer
          position: relative
          display: table-cell
          vertical-align: middle
          height: 100%
          border-radius: 4px
          width: 100%
          background-color: #428BCA
          pointer-events:all
          p
            line-height: 16px
            padding: 10px 30px 0 10px
            font-size: 13px
            float: left
            color: white
          .close-notification
            position: absolute
            right: 10px
            top: -5px
            font-size: 16px
            a
              line-height: 40px
              color: white
              &:hover
                color: #eeeeee
          &.notif-default
            background-color: #428BCA
          &.notif-warning
            background-color: #ff8400
          &.notif-error
            background-color: #E74C3C

.code-bar
  background: #fff
  color: stream-font-color
  height: middlebar-height
  line-height: middlebar-height
  padding-left: 10px
  position: relative
  border-bottom: 1px solid #e6e9ef

  .actions
    li
      float: left
      padding: 0
  .dropdown-menu
    min-width: initial
  .label
    font-size: 11px
    border-radius: 0px
    padding: 4px 7px
    border: 2px solid
    background: none
    color: #525864
    border-color: #525864
  .label-cypher
    color: #8FDDC7
    border-color: #8FDDC7
  .label-rest
    background-color: #81C0EB
  .label-help
    color: #D2A8E9
    border-color: #D2A8E9
  .label-auth
    background-color: #3498DB

  .mono
    font-family: mono-font-family
    font-size: 12px
    color: #525864
  .prompt
    margin-left: 1px
    margin-right: 5px
    opacity: 0.5
    font-weight: bold
  .code
    margin-left: 3px
    &:hover
      cursor: pointer
      border-bottom: 1px dotted #B6ADAD
      padding-bottom: 2px
  a.close-fullscreen
    display: none

  .status
    display: block
    max-height: 33px
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    padding-right: 40px

  .toggle
    ball-size = 16px

    float: left
    font-weight: bold
    font-size: 11px
    text-transform: uppercase
    border-left: 1px solid #e6e9ef
    height: middlebar-height
    .btn-group.toggle-buttons
      margin: 0 10px 0 10px
    button
      border-radius: 0px
      padding: 0 12px
      border: 0
      margin-top: -5px
      height: middlebar-height
      color: #9b9da2
      line-height: middlebar-height
      position: relative
      &:hover
        color: #40454f

.actions
  float: right
  opacity: 1.0
  .button
    transist: all 0.2s
    float: left
    border-left: 1px solid #E6E9EF
    // padding-top: 11px
    height: 39px
    font-size: 16px
    vertical-align: center
    position: relative
    color: #9B9DA2
    width: 41px
    text-align: center
    &.selected
      color: #30333a
    &.pinned
      color: #E6E9EF
      background-color: #9B9DA2
    &:hover
      background: color-button-hover
      color: #fff
    &.active, &.active:hover {
      color: #30333a
      cursor: default
      position: relative
      top: -1px
      background: #F9FBFD
      &.fa-table {
        background: #fff;
      }
    }
    &.fa-download
      padding-top: 12px
    &.fa-fullscreen
      padding-top: 12px
      font-size: 16px
    &.fa-refresh
      line-height: 36px
  .btn
    margin-left: 4px

.sign-in-frame
  .button-row
    margin-top: 20px
    padding: 0 15px 0 15px
    .btn-primary
      width: 200px
    .spacer
      width: 40px
      display: inline-block
    .no-thanks
      display: inline-block
      height: 20px
      padding: 6px 0 6px 0
